import React from "react";
import { Button, Checkbox, Form, Input,Card } from 'antd';
import { reg, usernameExist } from "../services/user";
import {useNavigate} from 'react-router-dom';
export default function Reg() {
    let navigate = useNavigate();
    const onFinish = async (values) => {
        console.log("Success:", values);
        await reg({username:values.username,pwd:values.pwd});
        navigate("/login");
    };

    const onFinishFailed = (errorInfo) => {
        console.log("Failed:", errorInfo);
    };
    // 栅格
    return (
      <Card title="注册" style={{ width: 500,margin:"auto" }}>
        <Form
            name="basic"
            labelCol={{
                span: 8,
            }}
            wrapperCol={{
                span: 16,
            }}
            initialValues={{
                remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
        >
            <Form.Item
                label="用户名"
                name="username"
                hasFeedback
                rules={[
                    {
                        required: true,
                        message: "用户名不能为空",
                    },
                    {
                        pattern: /^\w{6,20}$/,
                        message:"用户名格式不正确"
                    },
                    {
                        async validator(_, value) {
                          let data =  await usernameExist(value);
                          if (data.status == 1) {
                            return Promise.resolve();
                          }
            
                          return Promise.reject(new Error('用户名已存在'));
                        },
                    }
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="密码"
                name="pwd"
                rules={[
                    {
                        required: true,
                        message: "密码不能为空",
                    },
                ]}
            >
                <Input.Password />
            </Form.Item>
            <Form.Item
                label="确认密码"
                name="confirm"
                rules={[
                    {
                        required: true,
                        message: "确认密码不能为空",
                    },
                    ({ getFieldValue }) => ({
                        validator(_, value) {
                          if (!value || getFieldValue('pwd') === value) {
                            return Promise.resolve();
                          }
            
                          return Promise.reject(new Error('两次密码不一致'));
                        },
                    }),
                ]}
            >
                <Input.Password />
            </Form.Item>
            <Form.Item
                name="remember"
                valuePropName="checked"
                wrapperCol={{
                    offset: 8,
                    span: 16,
                }}
            >
                <Checkbox>Remember me</Checkbox>
            </Form.Item>

            <Form.Item
                wrapperCol={{
                    offset: 8,
                    span: 16,
                }}
            >
                <Button type="primary" htmlType="submit">
                    Submit
                </Button>
            </Form.Item>
        </Form>
        </Card>
    );
}
